<template>
  <div>
    <!-- 搜索 start -->
    <page-main v-if="!patrol_status">
      <el-row class="filter-row" :gutter="20">
        <el-col :span="4">
          <span class="filter-label">单位名称</span>
          <el-input clearable v-model="searchForm.unitBaseName" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="5">
          <span class="filter-label">单位编号</span>
          <el-input clearable v-model="searchForm.unitCode" placeholder="请输入"></el-input>
        </el-col>
        <!-- <el-col :span="4">
          <span class="filter-label">单位类型</span>
          <el-select v-model="searchForm.unit_type" filterable clearable>
            <el-option
              v-for="item in unitTypeList"
              :key="item"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span class="filter-label">技术服务机构</span>
          <el-select v-model="searchForm.wb_unit_id" filterable clearable>
            <el-option
              v-for="item in wbUnitTypeList"
              :key="item.id"
              :label="item.abbreviation"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span class="filter-label">负责人</span>
          <el-input
            clearable
            v-model="searchForm.contact_name"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <span class="filter-label">区域</span>
          <el-select v-model="searchForm.region_id" filterable clearable>
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <span class="filter-label">物联网</span>
          <el-select v-model="searchForm.have_install" filterable clearable>
            <el-option
              v-for="item in isHaveDeviceOption"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col> -->
        <el-col :span="4">
          <el-button class="searchBtn" type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="warning" @click="refreshBtn">重置</el-button>
        </el-col>
      </el-row>
    </page-main>
    <!-- 搜索 end -->
    <page-main>
      <el-table v-if="data != 10" :data="tableData" v-loading="loading">
        <el-table-column label="id" width="80" prop="id"></el-table-column>
        <el-table-column label="单位名称" prop="name"> </el-table-column>
        <el-table-column label="监管等级" prop="watch_level"> </el-table-column>
        <el-table-column label="单位地址" prop="address"> </el-table-column>
        <el-table-column label="行政区域" prop="region_name"> </el-table-column>
        <el-table-column label="单位类型" prop="unit_type"> </el-table-column>
        <el-table-column label="负责人" prop="contact_name" width="90"> </el-table-column>
        <el-table-column label="联系电话" prop="phone" width="115"> </el-table-column>
        <!-- <el-table-column label="服务机构" prop="wb_name"> </el-table-column> -->
        <el-table-column label="创建时间" prop="add_time" sortable width="110"></el-table-column>

        <el-table-column width="200" fixed="right" label="操作" align="center">
          <!-- <template #header>
            <el-button size="mini" type="primary" @click="addEditSocialUnit"
              >添加</el-button
            >
          </template> -->
          <template #default="scope">
            <div style="margin-top: 10px" v-if="scope.row.examineNum > 0">
              <el-button size="mini" type="danger" plain @click="jumpEvent('unitAdministrativeSanction', scope.row)"
                >行政处罚</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-else :data="earlyWarningData" v-loading="loading">
        <el-table-column label="任务名称" prop="name" width="160"> </el-table-column>
        <el-table-column label="巡查规则名称" prop="rule_name" width="160"> </el-table-column>
        <el-table-column label="巡查人员" prop="realname" width="100"> </el-table-column>
        <el-table-column label="单位名称" prop="unit_name" width="100"></el-table-column>
        <el-table-column label="是否有隐患" prop="is_danger" width="110">
          <template #default="scope">
            <span>{{ scope.row.is_danger == 0 ? '无' : '有' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否有故障" prop="is_fault" width="110">
          <template #default="scope">
            <span>{{ scope.row.is_fault == 0 ? '无' : '有' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="add_time" :formatter="formatDate" width="165"> </el-table-column>
        <el-table-column label="开始时间" prop="start_time" :formatter="formatDate" width="165"> </el-table-column>
        <el-table-column label="结束时间" prop="end_time" :formatter="formatDate" width="165"> </el-table-column>
        <el-table-column label="完成时间" prop="last_add_time" :formatter="formatDate" width="165"> </el-table-column>
        <el-table-column width="100" label="巡查结果" prop="result">
          <template #default="scope">
            <span :style="scope.row.result == '不合格' ? 'color:red' : ''"> {{ scope.row.result }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" fixed="right" label="操作">
          <template #default="scope">
            <div>
              <el-button size="mini" @click="showTaskDetail(scope.row)">查看</el-button>
              <!-- <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除？"
                @confirm="delTask(scope.row)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button size="mini" type="danger">删除</el-button>
                </template>
              </el-popconfirm> -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.currPage"
          :page-count="tableDataInfo.totalPage"
          :total="tableDataInfo.totalCount"
          background
          layout="total,prev, pager, next, jumper"
        >
          <!-- :hide-on-single-page="true" -->
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>
<script>
export default {
  props: ['setUnitTime', 'setUnitWatchLevel', 'patrol_status', 'all', 'data'],
  components: {
    // addEditUnit,
  },
  data() {
    return {
      searchForm: {
        id: '',
        name: '',
        unit_type: '',
        watch_level: '',
        contact_name: '',
        phone: '',
        region_id: '',
        wb_unit_id: '',
        have_install: ''
      },
      tableData: [],
      earlyWarningData: [],
      loading: false,
      search: '',
      tableDataInfo: '',
      unitTypeList: [],
      watchTypeList: [],
      regionList: [], //区域
      unitInfodialogVisible: false,
      unitEditId: '',
      pageCount: 1,
      isHaveDeviceOption: [
        { name: '已安装', value: 1 },
        { name: '未安装', value: 2 }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.data)
      if (this.data == 10) {
        console.log(111)
        this.getearlyWarningData()
      } else {
        this.getDataList()
      }
    })
  },
  created() {
    this.getType()
    // this.getRegionList();
    this.getWbUnitList()
  },
  methods: {
    showTaskDetail(row) {
      this.$router.push({
        name: 'unitTaskMangeDetail',
        query: {
          id: row.id
        }
      })
      //查看详细
      //   this.taskDetailVisible = true;
    },
    patrolResult(patrol_result) {
      let temp = ['', 'overdue-num', 'unqualified-num']
      return temp[patrol_result]
    },
    formatterTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue)
    },
    getearlyWarningData() {
      var timestamp = new Date().getTime()
      let params = {
        page: this.pageCount,
        rows: 10,
        patrol_status: 3,
        start_time: [timestamp - 31104000000, timestamp]
      }
      console.log(params)

      this.$apis
        .post('/unit/PatrolTask/lists', params)
        .then((res) => {
          this.earlyWarningData = res.data.lists
          this.pagination = res.data
          this.tableDataInfo = {
            totalCount: res.data.total,
            totalPage: res.data.total_page,
            currPage: res.data.page
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    getWbUnitList() {
      this.$api.post('/unit/WbUnit/Lists', { rows: 9999 }).then((res) => {
        this.wbUnitTypeList = res.data.list
      })
    },
    formatDate(row, column, time, index) {
      return this.$getDateTime(time)
    },
    // jumpEvent(name, row) {
    //   console.log(row.unitCode);
    //   this.$router.push({
    //     name: name,
    //     query: {
    //       unitCode: row.unitCode,
    //     },
    //   });
    // },
    refreshList(cancel) {
      this.unitInfodialogVisible = false
      if (!cancel) {
        this.getDataList()
      }
    },
    userMange(index, row) {
      this.$router.push({
        name: 'socialUnitUserMange',
        query: {
          id: row.id //单位id
        }
      })
    },
    getDataList(page) {
      this.loading = true
      let data = this.searchForm
      if (this.setUnitWatchLevel) data.watch_level = this.setUnitWatchLevel

      if (this.all) {
        this.$api
          .post('/xf/UnitInformation/lists', {
            page: this.pageCount,
            rows: 10,
            is_networking: 1,
            start_time: this.setUnitTime / 1000,

            ...data
          })
          .then((res) => {
            this.tableData = res.data.lists
            this.tableDataInfo = res.data
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        this.$api
          .post('/unit/UnitInformation/NoNetworkedListsV2', {
            page: this.pageCount,
            rows: 10,
            start_time: this.setUnitTime / 1000,

            ...data
          })
          .then((res) => {
            this.tableData = res.data.lists
            this.tableDataInfo = res.data
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    // 搜索
    searchBtn() {
      this.getDataList()
    },
    // 重置
    refreshBtn() {
      for (let key in this.searchForm) {
        this.searchForm[key] = ''
      }
      this.getDataList()
    },
    // 获取类型
    getType() {
      this.$api.post('/unit/UnitInformation/Setting').then((res) => {
        this.unitTypeList = res.data.unit_type
        this.watchTypeList = res.data.watch_level
      })
    },
    getRegionList() {
      this.$api.post('/unit/Region/tree').then((res) => {
        this.regionList = res?.data.map((item) => {
          return {
            name: item.name,
            value: item.id
          }
        })
      })
    },
    handleEdit(index, row) {
      this.unitInfodialogVisible = true
      this.formDisabled = false
      this.unitEditId = row.id
      //   this.$router.push({
      //     name: "editSocialUnit",
      //     params: { id: row.id },
      //   });
    },
    showDetail(index, row) {
      this.unitInfodialogVisible = true
      this.formDisabled = true
      this.unitEditId = row.id
    },
    handleDelete(index, row) {
      this.$api.post('/xf/UnitInformation/delete', { id: row.id }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
        let tableData = this.tableData
        tableData.splice(index, 1)
        this.getDataList()
      })
    },

    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.pageCount = e
      if (this.data == 10) {
        this.getearlyWarningData()
      } else {
        this.getDataList()
      }
    },
    closeDialog() {
      this.$refs.addForm.resetFields()
    },
    childMange(index, row) {
      this.$router.push({
        name: 'sociolUnitChildPage',
        query: { unit_id: row.id }
      })
    },
    patrol(index, row) {
      this.$router.push({
        name: 'patrolPoint',
        query: {
          id: row.id
        }
      })
    },
    constructMange(index, row) {
      this.$router.push({
        name: 'constructionPage',
        query: {
          id: row.id
        }
      })
    },
    qrcode(index, row) {
      this.$router.push({
        name: 'qrcode',
        query: {
          id: row.id
        }
      })
    },
    toTaskList(index, row) {
      localStorage.removeItem('TASK_FROM')
      this.$router.push({
        name: 'sociolUnitTaskMange',
        query: {
          unit_id: row.id
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
:v-deep(.el-tag) {
  width: 100px;
  height: auto;
  line-height: normal;
  white-space: normal;
}
.block {
  display: flex;
  justify-content: center;
}
.searchBox {
  margin: 20px;
  display: flex;
  background-color: #fff;
  padding: 20px;
  .input {
    width: 12%;
    margin-right: 15px;
  }
  .hint {
    line-height: 40px;
    margin-right: 10px;
  }
  .searchBtn {
    background-color: #2d8cf0;
    color: #fff;
  }
}
</style>
